<template>
  <div class="box">
    <div class="top">
      <img
        src="../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
        alt=""
        @click="goBackMessage"
      />
      <h4>消息</h4>
      <p @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">
        全部已读
      </p>
    </div>
    <div class="center">
      <div class="ti"></div>
      <div class="center1" @click="center1">
        <img src="../../images/xi.png" alt="" />
        <p>系统消息</p>
      </div>
      <div class="center2" @click="center2">
        <img src="../../images/wen.png" alt="" />
        <p>问诊消息</p>
      </div>
      <div class="center3" @click="center3">
        <img src="../../images/H.png" alt="" />
        <p>H币入账消息</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { onMounted, onBeforeUnmount } from "vue";
import { ElNotification } from "element-plus";

let notification;
import { ref } from "vue";
const router = useRouter();
const fullscreenLoading = ref(false);
onMounted(() => {
  notification = ElNotification({
    message: "打开系统通知,H 币入账等消息不错过",
    duration: 0,
  });
  // window.addEventListener("blur", closeNotification);
});

onBeforeUnmount(() => {
  window.removeEventListener("blur", closeNotification);
  notification.close();
});

const closeNotification = () => {
  notification.close();
};

const goBackMessage = () => {
  router.go(-1);
};
const center1 = () => {
  router.push({ path: "/System" });
};
const center2 = () => {
  router.push({ path: "/Inquiry" });
};
const center3 = () => {
  router.push({ path: "/HCoin" });
};
const openFullScreen1 = () => {
  fullscreenLoading.value = true;
  setTimeout(() => {
    fullscreenLoading.value = false;
  }, 1000);
};
</script>
<style lang="scss">
.box {
  width: 100%;
  height: 100%;
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top h4 {
  font-size: 16px;
}
.el-icon-back {
  font-size: 25px;
}
.center {
  width: 100%;
  height: 350px;
}
.ti {
  width: 100%;
  height: 30px;
  background: #ccc;
}
.center1 {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.center1 img {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}
.center1 p {
  margin-left: 10px;
  color: #4fcb9f;
}
.center2 {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #999;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.center2 img {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}
.center2 p {
  margin-left: 10px;
  color: #f984a2;
}
.center3 {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #999;
  display: flex;
  align-items: center;
}
.center3 img {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}
.center3 p {
  margin-left: 10px;
  color: #ffab26;
}
.el-notification {
  width: 100%;
  height: 30px;
  position: fixed;
  top: 50px !important;
  right: 0 !important;
}
.el-notification__content p {
  margin: -10px;
}
.el-notification__group .el-icon {
  position: absolute;
  right: 60px;
  top: 5px;
  font-size: 20px;
}
</style>